<template>
  <div>
    <v-card title="暗色背景">
      <vcu-chart-sankey
        :data="chartData"
        :settings="settings"
        :background-color="backgroundColor"
      />
    </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      backgroundColor: "#0e2439",
      chartData: {
        dimensions: [
          { name: "Canada" },
          { name: "USA" },
          { name: "Italy" },
          { name: "France" },
          { name: "Germany" },
          { name: "Spain" },
        ],
        measures: [
          { source: "Canada", target: "France", value: 2230000 },
          { source: "Canada", target: "Germany", value: 1990000 },
          { source: "Canada", target: "Italy", value: 1180000 },
          { source: "Canada", target: "Spain", value: 990000 },
          { source: "USA", target: "France", value: 880000 },
          { source: "USA", target: "Germany", value: 2020000 },
          { source: "USA", target: "Spain", value: 1110000 },
        ],
      },
      settings: {
        focusNodeAdjacency: "allEdges",
        label: {
          normal: {
            color: "#fff",
          },
        },
        lineStyle: {
          normal: {
            opacity: 0.5,
          },
        },
      },
    };
  },
  methods: {},
  created() {},
};
</script>
<style lang="less" scoped>
</style>
